<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<div id="app" class="page-actionsheet">
  <h1 class="page-title">Action Sheet</h1>
  <div class="page-actionsheet-wrapper">
    <mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
    <mt-button @click.native="sheetVisible2 = true" size="large">不带取消按钮,由“cancel-text”属性决定</mt-button>
    <mt-button @click.native="handleClick" size="large">等待中</mt-button>
  </div>
  <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  <mt-actionsheet :actions="actions2" v-model="sheetVisible2" cancel-text=""></mt-actionsheet>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
  new Vue({
    <!-- 对应div的ID -->
    el: '#app',
    <!-- 方法函数 -->
    methods: {
      handleClick() {
        <!-- 调用indicator组件的open方法 -->
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
      },
      takePhoto() {
        console.log('taking photo');
      },
      openAlbum() {
        console.log('opening album');
      },
      <!-- 返回前一页 -1表示前一页 -->
      goBack() {
        history.go(-1);
      }
    },
    <!-- 数据,sheetVisible为普通变量，actions表示数组变量（方括号） -->
    data() {
      return {
        sheetVisible: false,
        sheetVisible2: false,
        actions: [],
        actions2: []
      }
    },
    <!-- 组件加载完毕时执行的内容 -->
    mounted() {
      <!-- actions数组设置菜单 -->
      this.actions = [
        <!-- 拍照菜单执行的事件 takePhoto -->
        { name: '拍照',method: this.takePhoto },
        <!-- 拍照菜单执行的事件 openAlbum -->
        { name: '从相册中选择',method: this.openAlbum}
      ];
      <!-- actions2数组设置菜单 -->
      this.actions2 = [
        { name: '确定'},
        { name: '返回上一步',method: this.goBack }
      ];
    }
  })
</script>
</html>
